<template>
    <div>
        <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
            <!-- 问候 -->
            <div
                style="background-color: white;margin: 10px;width: 25%;border-radius: 10px;padding: 10px;text-align: left;">
                <b>您好，<span>医生名字</span>医师</b>
                <p style="color: #ccc;margin-top: 10px;">健康无忧提醒您，工作之余，要保证身体健康！</p>
                <el-divider></el-divider>
                <p>问诊安全提示</p>
                <ul>
                    <li style="display: flex;flex-shrink: 0;padding: 10px;">
                        <span
                            style="display: inline-block;width: 40px;height: 15px;background-color: #FF8989;margin-top:5px;margin-right: 10px;"></span>
                        <p>今日待诊患者中存在<b style="color: red;">[医闹]</b>患者<span
                                style="color: #2A8CFF;">@王*倩</span>，请您确保自身安全情况下，完成就诊。</p>
                    </li>
                </ul>
            </div>
            <!-- 门诊统计分析 -->
            <div style="margin:10px;padding: 10px;border-radius: 10px;width: 75%;background-color: white;">
                <div style="display: flex;justify-content: space-between;">
                    <span>门诊统计分析</span>
                    <span style="color: #2A8CFF;font-size: 12px;">更多统计</span>
                </div>
                <ul style="margin-top: 20px;display: flex;flex-wrap: wrap;justify-content: space-between;">
                    <li class="statistics">
                        <p>门诊就诊人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日就诊：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊入院人次数</p>
                        <b class="timeNum">392</b>
                        <span>今日入院：<b>3</b></span>
                        <span>较昨日：<b>1</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊检验人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日检验：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊检查人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日检查：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊手术预约人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日手术：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊处方数</p>
                        <b class="timeNum">2392</b>
                        <span>今日处方：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊退费人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日退费：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊院内转诊人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日转折：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>

                    <li class="statistics">
                        <p>门诊疾病上报人次数</p>
                        <b class="timeNum">2392</b>
                        <span>今日上报：<b>34</b></span>
                        <span>较昨日：<b>4</b><i class="el-icon-top"></i></span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 今日待办 -->
        <div style="display: flex;justify-content: space-between;">
            <div
                style="background-color: white; margin: 10px;width: 24%;border-radius: 10px;padding: 10px;text-align: left;">
                <div style="display: flex;justify-content: space-between;">
                    <b>今日待办</b>
                    <i class="el-icon-edit" style="font-size: 20px;color: #2A8CFF;"></i>
                </div>
                <el-divider></el-divider>
                <ul>
                    <li style="display: flex;justify-content: center;padding: 10px;">
                        <el-radio style="margin-right: 0px;margin-top: 5px;"></el-radio>
                        <p>今日待诊患者中存在<b style="color: red;">[医闹]</b>患者<span
                                style="color: #2A8CFF;">@王*倩</span>，请您确保自身安全情况下，完成就诊。</p>
                    </li>
                </ul>
            </div>

            <!-- 门诊预警 -->
            <div
                style="background-color: white;margin: 10px;width: 31%;border-radius: 10px;padding: 10px;text-align: left;">
                <div style="display: flex;justify-content: space-between;">
                    <b>门诊预警</b>
                </div>
                <el-divider></el-divider>
                <ul>
                    <li class="early-warning">
                        <span>诊断预警</span>
                        <p>近3日，出现<b>[20例] 发热/咳嗽/肺炎</b>患者，请医生注意个人防护，如果出现紧急特殊情况，请尽快上报…</p>
                    </li>
                    <li class="early-warning">
                        <span>诊断预警</span>
                        <p>近3日，出现<b>[20例] 发热/咳嗽/肺炎</b>患者，请医生注意个人防护，如果出现紧急特殊情况，请尽快上报…</p>
                    </li>
                    <li class="early-warning">
                        <span>诊断预警</span>
                        <p>近3日，出现<b>[20例] 发热/咳嗽/肺炎</b>患者，请医生注意个人防护，如果出现紧急特殊情况，请尽快上报…</p>
                    </li>

                </ul>
            </div>

            <!-- 院内资讯 -->
            <div
                style="background-color: white;margin: 10px;width: 40%;border-radius: 10px;padding: 10px;text-align: left;">
                <el-tabs type="card" @tab-click="handleClick" v-model="activeName">
                    <el-tab-pane label="院内资讯" name="first">
                        <ul>
                            <li class="information">
                                <p>最新消息</p>
                                <div>
                                    <p>关于院内疫情防控工作报告</p>
                                    <div>
                                        <p>5月8日至10日，院内疫情防控会议在北京举行… </p>
                                        <span>查看详情</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane label="医学图书馆" name="second">
                        <ul>
                            <li class="information">
                                <p>医学书籍</p>
                                <div>
                                    <p>全科医生诊疗与处方手册</p>
                                    <div>
                                        <p>临床一线医师、药师结合临床实践精心编写… </p>
                                        <span>查看详情</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first'
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event)
        }
    }
}
</script>

<style lang="scss" scoped>
.statistics {
    border: 1px solid #ccc;
    width: 30%;
    text-align: left;
    padding: 10px;
    border-radius: 10px;
    margin: 15px 0;

    b.timeNum {
        display: block;
        margin: 10px 0;
    }

    span {
        display: inline-block;
        margin-right: 40px;

        i {
            color: greenyellow;
            margin-left: 10px;
        }
    }

}

.early-warning {
    border: 1px solid rgba($color: #FF3333, $alpha: 0.5);
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 10px;

    b {
        color: #FF3333;
    }
}

.information {
    display: flex;
    width: 100%;
    height: 48px;

    >p {
        margin-top: 8px;
        display: block;
        font-weight: bold;
        color: white;
        background-image: linear-gradient(45deg, #0148C1, #1290CE, #0148C1);
        line-height: 45px;
        text-align: center;
        padding: 0 8px;
        border-radius: 5px;
        margin-right: 15px;
    }

    >div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;

        >div {
            width: 85%;
            display: flex;
            justify-content: space-between;
            font-size: 12px;

            >span {
                color: #1290CE;
            }
        }
    }
}
</style>